﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>JQ异常处理</TITLE>
<META content="text/html; charset=utf-8" http-equiv=Content-Type>
<SCRIPT type=text/javascript src="../Script/jquery-1.4.1.js"></SCRIPT>
<SCRIPT type=text/javascript src="../Script/tipswindown.js"></SCRIPT>
  <LINK rel=stylesheet type=text/css href="../white_skin.css">
  <SCRIPT language=javascript type=text/javascript>

      var Ajax_Loading = "<div style='padding:10px;'><img src='loading.gif' hspace='2' />正在加载数据...</div>";
      var Ajax_AttemptLoading = "<div style='padding:10px;'><img src='loading.gif' hspace='2' />正在尝试{0}次重新加载...</div>";
      
      var JQException =
      {
          PerFormAjax: function(url, element) {
              $.ajax({
                  cache: false,
                  type: "GET",
                  url: url,
                  beforeSend: function(XMLHttpRequest) { $("#" + element + "").html(Ajax_Loading); },
                  error: function(XMLHttpRequest, textStatus, errorThrown) { ErrAjaxCallback(this, textStatus, errorThrown, $("#" + element + "")); }, // 请求失败时调用//error: function (XMLHttpRequest, errMsg, errObj) { show(this, '', ''); }, // 请求失败时调用
                  success: function(xml) {
                      $("#" + element + "").html(xml);
                  }
              });
          },
          TestAjax: function(code) {
          var ul = document.getElementById("normalAjax");
              var li = document.createElement("li");
              li.id = ul.id + "_" + code;
              li.style.marginRight = 8 + "px";
              ul.appendChild(li);
              JQException.PerFormAjax("Handler.ashx?code=" + code, ul.id + "_" + code);
          },
          TestAjax2: function(code) {
          var cul = document.getElementById("exceptionAja");
              var cli = document.createElement("li");
              cli.id = cul.id + "_" + code;
              cli.style.marginRight = 8 + "px";
              cul.appendChild(cli);
              JQException.PerFormAjax("Handler.ashx?code=" + code, cul.id + "_" + code);
          }

      };


      function ErrAjaxCallback(obj, data, status, elem) {
          if (typeof (data) == "string" && data == "error") {
              var times = $(elem).attr("times");
              if (!times) {
                  times = 1;
              } else {
                  if (times++ > 50) {
                      $(elem).html('数据加载出错，请刷新页面')
                      return;
                  }
              }
              $(elem).attr("times", times);
              $.ajax({
                  cache: obj.cache,
                  beforeSend: function(xml) { $(elem).html(Ajax_AttemptLoading.replace("{0}", times)) },
                  type: obj.type,
                  url: obj.url,
                  error: function(XMLHttpRequest, textStatus, errorThrown) {
                      ErrAjaxCallback(this, textStatus, errorThrown, $(elem));

                  },
                  success: function(xml) {
                      $(elem).html(xml);
                  }
              });
          }
      }

      function test() {
        
          for (i = 1; i < 5; i++) {
              var curindex = Math.ceil(Math.random() * 10);
              JQException.TestAjax(curindex)
          }
      }

      function test2() {

          for (i = 1; i < 5; i++) {

              JQException.TestAjax2(i+"dddd")
          }
      }


      
      
      
  </SCRIPT>
</head>
<body>
<div style="text-align:center; width:100%">
<h3>JQ异常处理</h3></div>
<br /><br />
<div style="width:90%">
    关于JQ异常处理：本方法是在WFT开发中根据实际需要而产生的，在WFT的基金比较模块，存在大量且频繁的Ajax回调且页面元素较多，页面质量偏大，在这种情况下，异步回调出现异常成为了大概率事件，为缓解该情况，本方法孕育而生。<br />
    注意：
    1、JQ仅$.ajax方式支持自定义错误；
    
    </div>
     <TABLE style="MARGIN-TOP: 2px" class=box_table_none border=0 cellSpacing=0 cellPadding=0  >
     <tr>
     <td> <SPAN style="CURSOR: pointer" id=SPAN1 class=red2 
            onclick=test();>1、正常调用</SPAN></td>     
     </tr>
     <tr>
     <td>
     <div id="ccc">
     <ul id="normalAjax">
            </ul>
     </div>
     
     </td>
     
     </tr>
     </TABLE>
     
      <TABLE style="MARGIN-TOP: 2px" class=box_table_none border=0 cellSpacing=0 cellPadding=0  >
     <tr>
     <td> <SPAN style="CURSOR: pointer" id=SPAN2 class=red2 
            onclick=test2();>2、模拟异常调用</SPAN></td>     
     </tr>
     <tr>
     <td>
     <div id="ddd">
     <ul id="exceptionAja">
            </ul>
     </div>
     
     </td>
     
     </tr>
     </TABLE>
</body>
</html>
